<template>
	<view class="cont">
		<view class="iconfont iconyouhuiquan"></view>
		<view class="couponInfo">
			<view class="title">{{coupon.discounts}}元优惠券</view>
			<view class="tip">满{{coupon.need_cost}}元可用</view>
			<view v-if="coupon.state <= 1" class="btn" @tap="receive">{{coupon.stateTitle}}</view>
			<view v-else :class="coupon.state == 3 ? 'btnText-invalid':'btnText'">{{coupon.stateTitle}}</view>
			<view v-if="coupon.state <= 1" class="time">有效期：{{coupon.start_time}} 至 {{coupon.stop_time}}</view>
		</view>
		<view class="explain">
			<view class="explain-title">优惠券说明</view>
			<view class="explain-cont">{{coupon.coupon_desc ? coupon.coupon_desc : '无'}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon: {} //优惠券详情
			}
		},
		onLoad(e) {
			this.coupon = JSON.parse(e.data);
			this.coupon['stateTitle'] = this.util.couponState(this.coupon.state,'detail');
		},
		methods: {
			// 领取优惠券
			receive() {
				if (this.coupon.state == -1) {
					this.util.showDialog('你已达到领取上限,看看其它吧~');
				} else if (this.coupon.state == 0) {
					this.$shopApi.apiPost('font/coupon/get', {unid: this.coupon.unid}).then(res => {
						this.util.showDialog(res.data.message);
						if (res.data.code == 200) {
							this.coupon.myreceive++; //个人领取优惠券次数加1
							this.coupon.receive++; //整体优惠券被领取次数加1
							this.coupon['number'] = Number(this.coupon.total - this.coupon.receive); //优惠券剩余数量
							var myReceive = Number(this.coupon.quota - this.coupon.myreceive); //优惠券剩余领取次数
							if (myReceive <= 0) {
								this.coupon['state'] = -1;
							}
							this.$forceUpdate();
						}
					})
				}
			}
		}
	}
</script>

<style>
	page {
		position: absolute;
		height: 100%;
		background: linear-gradient(180deg, #E6B873 0%, #F5D59C 100%);
	}

	.cont {
		padding: 40upx;
		margin: 126upx 30upx;
		background: #FFFFFF;
		border-radius: 10upx;
	}

	.iconfont {
		width: 112upx;
		height: 112upx;
		line-height: 112upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 66upx;
		background: #E6B873;
		border-radius: 50%;
		border: 14upx solid #FFFFFF;
		margin: -110upx auto 0;
	}

	.couponInfo {
		text-align: center;
	}

	.title {
		color: #333333;
		font-size: 40upx;
		font-weight: bold;
		padding: 50upx 0 30upx;
	}

	.tip {
		color: #333333;
		font-size: 24upx;
	}

	.btn {
		color: #FFFFFF;
		padding: 20upx 134upx;
		width: fit-content;
		background-color: #E6B873;
		border-radius: 40upx;
		margin: 54upx auto 40upx;
	}

	.btnText {
		color: #CDCDCD;
		margin: 74upx auto 126upx;
	}

	.btnText-invalid {
		color: #E43841;
		margin: 74upx auto 126upx;
	}

	.time {
		color: #999999;
		font-size: 24upx;
		padding-bottom: 30upx;
	}

	.explain {
		border-top: 2upx dashed #E6B873;
		border-bottom: 2upx solid #E7E7E7;
		position: relative;
	}
	
	.explain:before {
		content: '';
		width: 26upx;
		height: 26upx;
		border-radius: 50%;
		background-color: #EDC586;
		position: absolute;
		z-index: 999;
		left: -54upx;
		top: -14upx;
	}
	
	.explain:after {
		content: '';
		width: 26upx;
		height: 26upx;
		border-radius: 50%;
		background-color: #EDC586;
		position: absolute;
		z-index: 999;
		right: -54upx;
		top: -14upx;
	}

	.explain-title {
		padding: 40upx 0 30upx;
	}

	.explain-cont {
		color: #333333;
		font-size: 24upx;
		padding-bottom: 20upx;
	}
</style>
